<template>
  <div class="login" @click="showLoginModal">
    <transition name="modal">
      <div v-show="displayLoginModal" class="modal">
        <div class="modal-content" :class="{ 'panel-active': isPanelActive }">
          <!-- 注册部分 -->
          <div class="container-from container-signup">
            <el-form action="#" class="form">
              <h2 class="form-title">注册账号</h2>
              <el-input
                type="text"
                placeholder="我怎么称呼你?"
                class="input"
                v-model="username"
              />
              <el-input
                type="email"
                placeholder="这里写账号!吊毛"
                class="input"
              />
              <el-input
                type="password"
                placeholder="请输入你的口令"
                class="input"
              />
              <button type="button" class="btn">一起唱跳rap篮球</button>
            </el-form>
          </div>
          <!-- 登录 -->
          <div class="container-from container-signin">
            <el-form
              action="#"
              class="form"
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
            >
              <h2 class="form-title">欢迎登录</h2>
              <el-input
                type="email"
                placeholder="请输入你的账号"
                class="input"
                v-model="ruleForm.account"
              />
              <el-input
                type="password"
                placeholder="请输入你的口令"
                class="input"
                v-model="ruleForm.password"
              />
              <a href="#" class="link">忘记密码</a>
              <button type="button" class="btn" @click="log">
                你干嘛!哎哟
              </button>
            </el-form>
          </div>
          <!-- 叠层部分 -->
          <div
            class="container-overlay"
            :class="{ 'panel-active': isPanelActive }"
          >
            <div
              class="overlay"
              :style="{ backgroundImage: `url(${backgroundImageURL})` }"
            >
              <div class="overlay-panel overlay-left">
                <button class="btn" @click="signIn">已有账号，直接登录</button>
              </div>
              <div class="overlay-panel overlay-right">
                <button class="btn" @click="signUp">没有账号点击注册</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <div v-if="displayLoginModal" class="mask"></div>
  </div>
</template>

<script>
export default {
  computed: {
    backgroundImageURL() {
      return this.$store.state.backgroundImageURL;
    },
  },
  data() {
    return {
      ruleForm: {
        account: "",
        password: "",
      },
      displayLoginModal: false,
      username: "",
      isPanelActive: false,
    };
  },
  rules: {
    name: [
      { required: true, message: "请输入活动名称", trigger: "blur" },
      { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
    ],
    region: [{ required: true, message: "请选择活动区域", trigger: "change" }],
  },
  methods: {
    showLoginModal() {
      this.displayLoginModal = true;
    },
    showLoginPanel(panel) {},
    log() {
      if (this.ruleForm.account === "admin" && this.ruleForm.password === "123456") {
        // 登录成功，跳转到其他页面
        this.$router.push("/home");
      } else {
        // 登录失败，显示错误信息
        alert("账号密码都能忘,菜B");
      }
    },
    reg() {},
    signIn() {
      // 处理已有账号，直接登录逻辑
      // 可以在这里添加相应的代码
      this.isPanelActive = false;
    },
    signUp() {
      // 处理没有账号点击注册逻辑
      // 可以在这里添加相应的代码
      this.isPanelActive = true;
    },
  },
};
</script>

<style scoped>
.panel-active .overlay-left {
  transform: translateX(0);
}

.panel-active .container-overlay {
  transform: translateX(-100%);
}

.panel-active .overlay {
  transform: translateX(50%);
}

.panel-active .container-signin {
  transform: translateX(100%);
}

.panel-active .container-signup {
  opacity: 1;
  z-index: 5;
  transform: translateX(100%);
}

.modal-enter {
  opacity: 0;
  transform: translateY(100vh);
}

.modal-enter-active {
  transition: all 2s;
}

.modal-enter-to {
  opacity: 1;
  transform: translateY(0);
}

.modal-leave {
  opacity: 1;
  transform: translateY(0);
}

.modal-leave-active {
  transition: all 1s;
}

.modal-leave-to {
  opacity: 0;
  transform: translateY(100vh);
}

.login {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 750px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 9999;
}

.modal-content {
  background-color: #e7e7e7;
  border-radius: 0.7rem;
  /* 设置阴影效果，它的水平偏移量为 0，垂直偏移量为 0.9rem（即相对于元素的顶部距离），模糊半径为 1.7rem，颜色为 rgba(0, 0, 0, 0.25)。 */
  box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25) 0 0.7rem 1.7rem
    rgba(0, 0, 0, 0.22);
  height: 420px;
  max-width: 750px;
  overflow: hidden;
  position: relative;
  /*父元素进行定位*/
  width: 100%;
}

.container-from {
  height: 100%;
  position: absolute;
  /*表单相对于container进行定位*/
  top: 0;
  transition: all 0.6s ease-in-out;
  /*设置动画效果适用于全部 0.6秒执行，平滑过渡*/
}

.container-signin {
  /* 登录部分整体设置 */
  left: 0;
  width: 50%;
  z-index: 2;
}

.container-signup {
  /* 注册部分 */
  left: 0;
  width: 50%;
  z-index: 1;
  opacity: 0;
  /* 透明不可见 */
}

.form {
  display: flex;
  align-items: center;
  justify-content: center;
  /*更改默认弹性盒主轴方向居中*/
  flex-direction: column;
  padding: 0 3rem;
  height: 100%;
  /* 文字居中 */
  text-align: center;
  background-color: #e7e7e7;
}

.form-title {
  /* 标题界面 */
  font-weight: 300;
  margin: 0;
  margin-bottom: 2rem;
}

.link {
  /* 忘记密码部分 */
  color: #333;
  font-size: 0.9rem;
  margin: 1.5rem 0;
  margin-bottom: 2px;
  /* 用于去除文本的装饰效果 */
  text-decoration: none;
}

.input {
  width: 100%;
  margin: 0.5rem 0;
  border: none;
  outline: none;
  border-radius: 6px;
}

.btn {
  /* 对整个按钮的样式美化 */
  background-color: #f25d8e;
  /*背景颜色，阴影，弧度，文字颜色，鼠标样式，文字样式*/
  box-shadow: 0 4px 4px rgba(255, 112, 159, 0.3);
  border-radius: 6px;
  color: #e7e7e7;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: bold;
  /* 属性设置字符间的间距为 0.1rem。这意味着文本中的字符将会相对于默认的间距稍微拉宽或缩小 */
  letter-spacing: 0.1rem;
  padding: 0.9rem 4rem;
  /* 关于缓动函数，ease-in 是其中一种，它在动画开始时具有较慢的加速度，逐渐加快。除了 ease-in，还有很多其他的缓动函数可供选择，如 ease-out（慢慢变慢）、ease-in-out（加速再减速）等。 */
  /* transition 属性指定了过渡效果的属性、持续时间和缓动函数。具体来说，transform 是过渡效果应用到的 CSS 属性，80ms 是过渡效果的持续时间，ease-in 是过渡效果的缓动函数。 */
  transition: transform 80ms ease-in;
}

.form > .btn {
  margin-top: 1.5rem;
}

/* btn被点击的时候，进行缩放动画 */
.btn:active {
  transform: scale(0.8);
}

.container-overlay {
  height: 100%;
  left: 50%;
  /* 隐藏掉超出部分的图画 */
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: transform 0.6s ease-in-out;
  width: 50%;
  /* 优先显示级别最高 遮住空白处，使得显示动画 */
  z-index: 100;
}

.overlay {
  /* 父容器的 200% 100%  */
  width: 200%;
  height: 100%;
  /* 的定位设置为相对定位，使得后续的定位属性可以生效。 */
  position: relative;
  /* 左边缘定位到父容器的左边缘外，即向左移动一个父容器的宽度。 */
  left: -100%;
  /* 再次引入背景图 */
  background: url("../../assets/2.jpg") no-repeat center fixed;
  background-size: cover;
  transition: transform 0.6s ease-in-out;
  transform: translateX(0);
  /* 将 .overlay 进行水平方向平移，当前设置为 translateX(0) 表示不发生平移。 */
}

.overlay-panel {
  /* 控制按钮有无账号那一部分 */
  /* 与父元素同高则定位居中 */
  height: 100%;
  width: 50%;
  /* 相对于overlay绝对定位 */
  position: absolute;
  /* 弹性盒子水平垂直居中切变换主轴为y轴 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* transform: translateX(0); */
  transition: transform 0.6s ease-in-out;
}

.overlay-left {
  /* 左边部分,已有账号直接登录,x轴平移-20% */
  transform: translateX(-20%);
}

.overlay-right {
  /* 右部分,没有账号按钮 */
  right: -3px;
  transform: translateX(0);
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9998;
}
</style>